<template>
    <div :id="'silder-left' + type" class="leftModule silder-left" style="min-width: 250px">
        <div class="title">
            <!-- 插槽 标题参数 -->
            <slot name="title"></slot>
        </div>
        <div v-if="type != '操作记录'">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" stretch class="card-tabs" style="margin-top: 6px">
                <el-tab-pane label="文件" name="File">
                    <div class="tree">
                        <el-input size="mini" placeholder="来源名称或类型" v-model="filterFileText">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-tree
                            ref="treeFile"
                            node-key="id"
                            class="filter-tree"
                            :data="fileDataSource"
                            :props="defaultProps"
                            :filter-node-method="filterNode"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :default-expanded-keys="expandedKeyFile"
                            :current-node-key="currentNodeId"
                            accordion
                            @node-click="handleNodeClick"
                        >
                            <span class="custom-tree-node show-btns" slot-scope="{ node, data }">
                                <template v-if="node.isEdit">
                                    <el-input
                                        v-model="data.label"
                                        autofocus
                                        size="mini"
                                        :ref="'slotTreeInput' + data.id"
                                        @blur.stop="handleInput(node, data)"
                                        @keyup.enter.native="handleInput(node, data)"
                                        class="editInput"
                                    ></el-input>
                                </template>
                                <template v-else>
                                    <span class="label">
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            :open-delay="1000"
                                            :content="
                                                data.indexType === '2' && data.level === '4' ? `${data.label}(${data.productCode})` : data.label
                                            "
                                            placement="top-start"
                                        >
                                            <div class="node-name" :style="{ width: data.level === '4' ? '130% !important' : '130%' }">
                                                <span v-show="['监管类', '合同类', '公司制度解读类'].includes(data.label)" style="font-weight: 700">
                                                    <i class="el-icon-folder-opened"></i>
                                                    {{ data.label }}
                                                </span>
                                                <span v-show="!['监管类', '合同类', '公司制度解读类'].includes(data.label)">
                                                    <div v-show="data.finish === '0'" class="new-style" style="top: 2px; left: -15px">N</div>
                                                    {{
                                                        data.indexType === '2' && data.level === '4'
                                                            ? `${data.label}(${data.productCode})`
                                                            : data.label
                                                    }}
                                                </span>
                                            </div>
                                        </el-tooltip>
                                    </span>
                                    <el-button
                                        type="text"
                                        size="mini"
                                        icon="el-icon-edit"
                                        class="btns"
                                        style="display: none; color: black; position: absolute; top: 6px; right: 50px"
                                        v-if="['2'].includes(data.level) && ['1', '3'].includes(data.indexType)"
                                        @click.stop="handleEdit(node, data)"
                                    ></el-button>
                                    <el-button
                                        type="text"
                                        size="mini"
                                        icon="el-icon-edit"
                                        class="btns"
                                        style="display: none; color: black; position: absolute; top: 6px; right: 30px"
                                        v-if="['3'].includes(data.level) && ['1', '3'].includes(data.indexType)"
                                        @click.stop="handleEdit(node, data)"
                                    ></el-button>
                                    <!-- 添加节点 -->
                                    <el-button
                                        type="text"
                                        size="mini"
                                        icon="el-icon-folder-add"
                                        class="btns"
                                        style="display: none; color: black; position: absolute; top: 6px; right: 50px"
                                        v-if="['1'].includes(data.level) && ['1', '3'].includes(data.indexType)"
                                        @click.stop="handleAdd(data)"
                                    ></el-button>
                                    <el-button
                                        type="text"
                                        size="mini"
                                        icon="el-icon-folder-add"
                                        class="btns"
                                        style="display: none; color: black; position: absolute; top: 6px; right: 30px"
                                        v-if="['2'].includes(data.level) && ['1', '3'].includes(data.indexType)"
                                        @click.stop="clickIconEditOutline(data, 'add')"
                                    ></el-button>
                                    <!-- 删除节点 -->
                                    <el-button
                                        type="text"
                                        size="mini"
                                        icon="el-icon-delete"
                                        class="btns"
                                        style="display: none; color: black; position: absolute; top: 6px; right: 12px"
                                        v-if="['2', '3'].includes(data.level) && ['1', '3'].includes(data.indexType)"
                                        @click.stop="handleAddDel(data)"
                                    ></el-button>
                                </template>
                            </span>
                        </el-tree>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="产品" name="Product">
                    <div class="tree">
                        <el-input size="mini" placeholder="来源名称或类型" v-model="filterProductText">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-tree
                            ref="treeProduct"
                            node-key="id"
                            class="filter-tree"
                            :data="productDataSource"
                            :props="defaultProps"
                            :filter-node-method="filterNode"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :default-expanded-keys="expandedKeyPro"
                            :current-node-key="currentNodeProductkey"
                            accordion
                            @node-click="handleNodeClickPro"
                        >
                            <span class="custom-tree-node" slot-scope="{ data }">
                                <span class="label">
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :open-delay="1000"
                                        :content="data.indexType === '2' && data.level === '4' ? `${data.label}(${data.productCode})` : data.label"
                                        placement="top-start"
                                    >
                                        <span class="node-name node-name-noicon" :style="{ width: data.level === '4' ? '130% !important' : '130%' }">
                                            <div v-show="data.finish === '0'" class="new-style" style="top: 2px; left: -15px">N</div>
                                            {{ data.indexType === '2' && data.level === '4' ? `${data.label}(${data.productCode})` : data.label }}
                                        </span>
                                    </el-tooltip>
                                </span>
                            </span>
                        </el-tree>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-else>
            <div class="tree">
                <el-input size="mini" placeholder="来源名称或类型" v-model="filterRecordText">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-tree
                    ref="treeRecord"
                    node-key="id"
                    class="filter-tree"
                    :data="fileDataSources[0]"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :default-expanded-keys="expandedKey"
                    :current-node-key="'0'"
                    accordion
                    @node-click="handleNodeClickRecord"
                >
                    <span class="custom-tree-node" slot-scope="{ data }">
                        <span class="label">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :open-delay="1000"
                                :content="data.indexType === '2' && data.level === '4' ? `${data.label}(${data.productCode})` : data.label"
                                placement="top-start"
                            >
                                <span class="node-name node-name-noicon" :style="{ width: data.level === '4' ? '130% !important' : '130%' }">
                                    {{ data.indexType === '2' && data.level === '4' ? `${data.label}(${data.productCode})` : data.label }}
                                </span>
                            </el-tooltip>
                        </span>
                    </span>
                </el-tree>
            </div>
        </div>
        <div class="move-btn" v-move-crosswise="{ activePane: type }"></div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';

@Component({
    name: 'EntryStandardLibrary',
    components: {},
})
export default class EntryLeftModule extends Vue {
    @Prop() fileDataSource;
    @Prop() productDataSource?;
    @Prop() currentNodeFilekey;
    @Prop() currentNodeProductkey;
    @Prop() clauseSourceCode;
    @Prop() type;
    @Prop() fileDataSources?;
    @Prop() treeExpandKeys;
    @Prop() treeExpandKeys2;

    activeName = 'File';
    filterFileText: string = ''; // 文件tree节点搜索
    filterProductText: string = ''; // 产品tree节点搜索
    filterRecordText: string = ''; // 产品tree节点搜索
    expandedKey = ['0'];
    defaultShowNodes = [];
    defaultProps = {
        children: 'children',
        label: 'label',
    };
    nodeMemory = '';
    currentNodeId = '';

    expandedKeyFile: string[] = ['0'];
    expandedKeyPro: string[] = ['0'];

    mounted() {
        if (this.type == '操作记录') {
            this.activeName = '';
        }

        if (sessionStorage.getItem('jumpParam-defaultFundCode')) {
            this.expandedKeyFile = [sessionStorage.getItem('jumpParam-defaultFundCode')];
        }
    }
    @Watch('fileDataSource', { immediate: true, deep: true })
    watchCurrentNodekey(newVal, oldVal) {
        if (this.$refs.treeFile as any) {
            this.$nextTick(() => {
                (this.$refs.treeFile as any).setCurrentKey(this.currentNodeFilekey);
            });
        }
    }
    @Watch('productDataSource', { immediate: true, deep: true })
    watchProductDataSource() {
        if (this.$refs.treeProduct as any) {
            this.$nextTick(() => {
                (this.$refs.treeProduct as any).setCurrentKey(this.currentNodeProductkey);
            });
        }
    }

    @Watch('treeExpandKeys', { immediate: true, deep: true })
    watchTreeExpandKeys(newData, oldData) {
        console.log('treeExpandKeys(当前展开的节点):', newData);
        this.expandedKeyFile = [newData];
    }

    @Watch('treeExpandKeys2', { immediate: true, deep: true })
    watchTreeExpandKeys2(newData, oldData) {
        console.log('treeExpandKeys(当前展开的节点):', newData);
        this.expandedKeyPro = [newData];
    }

    handleClick(tab, event) {
        this.$emit('emitTabpaneType', tab.name);
    }
    // 编辑节点
    handleEdit(node, data) {
        // 设置编辑状态
        if (!node.isEdit) {
            this.$set(node, 'isEdit', true);
        }
        // 输入框聚焦
        this.$nextTick(() => {
            if (this.$refs['slotTreeInput' + data.id]) {
                (this.$refs['slotTreeInput' + data.id] as any).$refs.input.focus();
            }
        });
    }
    // 修改节点
    handleInput(node, data) {
        // 退出编辑状态
        if (node.isEdit && data.level === '2') {
            this.$set(node, 'isEdit', false);
            this.$axios
                .post('/zhiguan/indexArticle/directory/update', {
                    indexDirectoryCode: data.id,
                    indexType: data.indexType, // 指标类型：1:监管类 2:合同类
                    parentCode: '', // 来源类型
                    indexName: data.label, // 指标来源名称
                })
                .then((res: any) => {
                    if (res == 1) {
                        this.yh_message_warn('无修改!');
                    } else {
                        this.yh_message_success('修改成功!');
                        this.$emit('emitNodeEdit', false, '刷新接口');
                        this.expandedKeyFile = [data.id];
                    }
                });
        } else if (node.isEdit && data.level === '3') {
            this.$set(node, 'isEdit', false);
            this.$axios
                .post('/zhiguan/indexArticle/article/update', {
                    articleCode: data.id,
                    articleName: data.label.indexOf('(无效)') != -1 ? data.label.substring(4) : data.label,
                })
                .then((res: any) => {
                    if (res == 1) {
                        this.yh_message_warn('无修改!');
                    } else {
                        this.yh_message_success('修改成功!');
                        this.$emit('emitNodeEdit', false, '刷新接口');
                        this.expandedKeyFile = [data.id];
                    }
                });
        }
    }
    // 树节点点击
    handleNodeClick(data, node) {
        this.$emit('handleNodeClick', data, node);
    }
    handleNodeClickPro(data, node) {
        this.$emit('handleNodeClickPro', data, node);
    }
    clickIconEdit(data) {
        this.$emit('emitIconEdit', data);
    }
    clickIconEditOutline(data, param) {
        this.$emit('emitIconEditOutline', data, param);
    }
    clickIconPlus(data) {
        this.nodeMemory = data.id;
        this.$emit('emitIconPlus', data);
    }
    // 新增节点
    handleAdd(data) {
        this.$axios
            .post('/zhiguan/indexArticle/directory/insert', {
                indexDirectoryCode: '',
                indexType: data.indexType, // 指标类型：1:监管类 2:合同类
                parentCode: data.id, // 来源类型
                indexName: '新增分类', // 指标来源名称
            })
            .then((res: any) => {
                this.yh_message_success('新增成功!');
                this.$emit('emitNodeEdit', false, '刷新接口');
                this.expandedKeyFile = [data.id];
            });
    }
    handleAddDel(data) {
        console.log('删除hzj', data);
        if (data.level == '2') {
            this.$axios
                .post('/zhiguan/indexArticle/directoryCode/delete', {
                    indexDirectory: data.id,
                })
                .then((res: any) => {
                    this.yh_message_success('删除成功!');
                    this.$emit('emitNodeEdit', false, '刷新接口2', data);
                });
        } else if (data.level == '3') {
            this.$axios
                .post('/zhiguan/indexArticle/article/delete', {
                    articleCode: data.id,
                })
                .then((res: any) => {
                    this.yh_message_success('删除成功!');
                    this.$emit('emitNodeEdit', false, '刷新接口2', data);
                });
        }
    }
    clickIconTime(data) {
        this.$emit('emitIconTime', data);
    }
    clickIconEditTest(node, data) {
        this.$emit('emitIconEditTest', node, data);
    }
    // 树节点过滤搜索
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    }
    @Watch('filterFileText')
    handleFilterText(val) {
        (this.$refs.treeFile as any).filter(val);
    }
    @Watch('filterProductText')
    handleFilterProductText(val) {
        (this.$refs.treeProduct as any).filter(val);
    }
    @Watch('filterRecordText')
    handleFilterRecordText(val) {
        (this.$refs.treeRecord as any).filter(val);
    }

    // 点击操作记录节点
    handleNodeClickRecord(data) {
        this.$emit('emitHandleNodeClickRecord', data);
    }

    /**
     * 获取当前树选中节点
     */
    getCurrentKey() {
        return (this.$refs['treeFile'] as any).getCurrentKey();
    }
    /**
     * 获取当前树选中节点
     */
    getCurrentKey2() {
        return (this.$refs['treeProduct'] as any).getCurrentKey();
    }
}
</script>
<style lang="scss" scoped>
.leftModule {
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #e5e5e5;
    .title {
        height: 40px;
        line-height: 40px;
        border-bottom: 3px solid #e5e5e5;
    }
    .tree {
        height: 98%;
        width: 100%;
        margin-top: 5px;
        .filter-tree {
            height: calc(100vh - 180px);
            // width: calc(100% - 20px);
            width: 100%;
            // margin: 0 10px;
            overflow: auto !important;
            .custom-tree-node {
                position: relative;
                width: calc(100% - 24px);
                .label {
                    width: 100%;
                }
                .node-name {
                    display: inline-block;
                    width: 130%;
                    height: 20px;
                    line-height: 20px;
                    padding: 3px 60px 3px 0;
                    overflow: hidden !important;
                    white-space: nowrap !important;
                    text-overflow: ellipsis !important;
                }

                .node-name-noicon {
                    padding: 3px 0;
                }
            }
        }

        /deep/ .el-input--mini {
            width: calc(100% - 20px);
            margin: 0 10px;
            font-size: 12px;
        }
    }
}
/deep/ .el-tree-node__content {
    margin-top: 5px !important;
}
/deep/ .el-button:hover {
    transform: scale(1.5) !important;
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(186, 146, 111) !important;
}
.editInput {
    /deep/ .el-input__inner {
        border: 1px solid #ba926f;
        height: 24px !important;
    }
}

.new {
    font-size: 10px;
    color: rgb(216, 30, 6);
    transform: scale(0.7);
    display: inline-block;
    font-weight: bold;
    margin-right: -5px;
}

.card-tabs /deep/ .el-tabs__nav .el-tabs__item {
    height: 24px !important;
    line-height: 24px !important;
    font-size: 12px;
    margin: 5px;
}

.card-tabs /deep/ .el-tabs__item.is-active {
    background: #fff !important;
}

.card-tabs /deep/ .el-tabs__nav {
    width: calc(100% - 20px);
    min-width: calc(100% - 20px);
    margin: 0 10px;
    background: #f9f9f9;
    margin-bottom: 10px;
    border-bottom: 1px solid #e4e7ed;
    border-radius: 4px;
    font-size: 12px;
}

/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #faf2ea;
    color: rgb(186, 146, 111);
    font-weight: 700;
}

.new-style {
    position: absolute;
    left: -5px;
    top: 10px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    background: #ff7106;
    color: white;
    text-align: center;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
}

/deep/.el-tree {
    .el-tree-node__content:hover {
        .node-name {
            width: 100% !important;
        }
        // background-color: #208bf830;
        .btns {
            display: inline-block !important;
        }
    }

    .el-tree-node__content {
        span {
            font-size: 12px;
        }
    }
}
</style>
